<template>
	<view class="pagebox">
		<u-navbar :is-back="nav.isback" :title="nav.title" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box ">
			<view class="bg-img h424 " style="background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210825140553.png);"></view>
			<view class="flex justify-center personalInfo h158" v-if="0">
				<view
					class="bg-img h158 w690 padding-lr-lg flex align-center r10"
					style="background: linear-gradient(-21deg, #FFE7B8, #FFE8C6, #FFE7B8);"
				>
					<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210826132433.png" mode="aspectFill" class="w60 h60  round"></image>
					<view class="flex flex-direction ml30 ">
						<view class="flex align-center"><text class="f28 text-bold mr30" style="color: #50310E;">您还不是会员</text></view>
						<text class="f26 mt10" style="color:#9B6B34 ;">购买会员，获取更多权益</text>
					</view>
				</view>
			</view>

			<view class="flex justify-center personalInfo h158 padding-left" v-if="0">
				<scroll-view scroll-x="true" style="height:158rpx ;">
					<view class="flex">
						<view class="w336  mr6" v-for="(item, index) in 5" :key="index">
							<view
								class="w336 h158 r10 flex align-center justify-start"
								style="background: linear-gradient(-21deg, #FFE7B8, #FFE8C6, #FFE7B8);"
							>
								<image
									src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210826132433.png"
									mode="aspectFill"
									class="w60 h60  round margin-lr"
								></image>
								<view class="flex flex-direction">
									<text class="f28 text-bold mr30">初级会员·风水</text>
									<text class="f24 margin-top-xs" style="color: #9B6B34;">有效期至2021.08.26</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<swiper
				:autoplay="true"
				:interval="3000"
				:duration="1000"
				value=""
				class="flex w690  personalInfo h160"
				v-if="userInfo.members.length == 0"
			>
				<swiper-item
					class="w690 h160 r10 flex align-center justify-start"
					style="background: linear-gradient(-21deg, #FFE7B8, #FFE8C6, #FFE7B8);"
				>
					<view class="w690 h160 r10 flex align-center justify-start">
						<image
							src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210826132433.png"
							mode="aspectFill"
							class="w60 h60  round margin-lr"
						></image>
						<view class="flex flex-direction mr50">
							<text class="f28 text-bold ">您还不是会员</text>
							<text class="f24 margin-top-sm" style="color: #9B6B34;">购买会员，获取更多权益</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<swiper :autoplay="true" :interval="3000" :duration="1000" class="flex w690  personalInfo h160" v-else>
				<swiper-item
					class="w690 h160 r10 flex align-center justify-start"
					style="background: linear-gradient(-21deg, #FFE7B8, #FFE8C6, #FFE7B8);"
					v-for="(item, index) in userInfo.members"
					:key="index"
				>
					<view class="w690 h160 r10 flex align-center justify-start">
						<image
							src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210826132433.png"
							mode="aspectFill"
							class="w60 h60  round margin-lr"
						></image>
						<view class="flex flex-direction mr50">
							<text class="f28 text-bold ">{{ item.member.name }}</text>
							<text class="f24 margin-top-sm" style="color: #9B6B34;">{{ item.expiration_text }}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>

			<view class="padding flex justify-between">
				<button class="btn cu-btn flex align-center justify-center" @click="bulletFrm = true">兑换会员</button>
				<!-- <button class="btn cu-btn flex align-center justify-center">推广机制</button> -->
			</view>
			<view class="padding-lr flex padding-tb-xs align-center ">
				<text
					class=" mb"
					@click="mbrSelection(index + 1, item)"
					:class="cc == index + 1 ? 'mbr animation-fade' : ''"
					v-for="(item, index) in dd"
					:key="index"
				>
					{{ item.name }}
				</text>
				<!-- <text class=" mb" @click="mbrSelection(2)" :class="cc == 2 ? 'mbr animation-fade' : ''">中级会员</text>
				<text class=" mb" @click="mbrSelection(3)" :class="cc == 3 ? 'mbr animation-fade' : ''">高级会员</text>
				<text class=" mb" @click="mbrSelection(4)" :class="cc == 4 ? 'mbr animation-fade' : ''">超级代理</text> -->
			</view>
			<scroll-view scroll-x="true" class=" padding-left padding-top">
				<view class="ww100 hh100 flex">
					<view
						class="w230 h280 r20 link flex flex-direction justify-center align-center mr30"
						v-for="(item, index) in category"
						:key="index"
						@click="click(index, item)"
						:class="index == c ? 'style2 animation-fade' : ''"
					>
						<text style="color: #CAB78C;" class="text-bold block w230 text-center tt1">{{ item.name }}</text>
						<text class="text-price f40 mt25 tt2 text-bold" style="color: #D6C5A1;">{{ item.price }}</text>
						<text class="mt25 text-price tt3" style="text-decoration: line-through; color: #9B9B9B;">{{ item.old_price }}</text>
						<text class="f24 mt25 tt4" style="color: #806E47;">立省{{ Number(item.old_price) - Number(item.price) }}元</text>
					</view>
				</view>
			</scroll-view>

			<view class="flex align-center justify-center mt44">
				<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210825151258.png" mode="aspectFill" class="w608 h44"></image>
			</view>

			<view class="flex  flex-wrap padding-lr mt50">
				<view class="ww50 flex justify-start mb64" v-for="(item, index) in privilege" :key="index">
					<image :src="item.a" mode="" class="w82 h82 round"></image>
					<view class="flex flex-direction justify-between margin-left">
						<text class="f26 style">{{ item.b }}</text>
						<text class="f24 style1">{{ item.c }}</text>
					</view>
				</view>
			</view>
			<view class="h120"></view>
			<u-button
				class="btnbuyNow  flex align-center justify-center u-reset-button"
				ripple-bg-color="#fce09d"
				ripple
				:custom-style="custom"
				@click="showpay = !showpay"
			>
				立即购买
			</u-button>
		</view>
		<!-- 弹框 -->
		<u-popup v-model="bulletFrm" mode="bottom" border-radius="14">
			<view class="padding">
				<view
					class="bg-img w264 h54 flex align-center justify-center"
					style="background-image:url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210826144912.png); margin: 0 auto;"
				>
					<text class="f30 text-bold">兑换会员</text>
				</view>
				<view class="padding-tb-lg flex justify-between align-center">
					<text class="f30 text-bold" style="white-space: nowrap;">输入兑换码:</text>
					<view class="redemptionCd flex align-center padding-left">
						<input type="text" value="" placeholder="请输入兑换码" v-model="code" placeholder-class="ppp" style="width: 100%;" />
					</view>
				</view>
				<block v-if="catg">
					<view class="mb42 "><text class="f28 text-bold">请选择会员类别</text></view>
					<view class="flex flex-wrap justify-between mb55 ">
						<view
							class="w336 h158 r20 flex flex-direction justify-center  padding-left mb18 animation-slide-bottom u-relative"
							@click="clickmbr(index, item.category_id)"
							style="background: #2B2B2B; transition-delay: 3s;"
							:style="[{ animationDelay: (index + 1) * 0.1 + 's' }]"
							v-for="(item, index) in codeData"
							:key="index"
						>
							<text class="f28 text-bold" style="color: #FFF8C8;">{{ item.text }}·{{ item.name }}</text>
							<text class="f26 mt24" style="color: #F6ECAA;">{{ item.price }}</text>
							<image
								src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210826155302.png"
								mode="aspectFill"
								class="w36 h36 round checkmarkSelection"
								v-if="index == ccc"
							></image>
						</view>
					</view>
				</block>
				<button class="exchange cu-btn flex align-center justify-center" @click="redeemNow" v-if="!catg">立即查询</button>
				<button class="exchange cu-btn flex align-center justify-center" @click="enquireNow" v-else>立即兑换</button>
				<view class="flex justify-center">
					<text class="f24 " style="color: #666666;">提示:兑换成功后自动成绑定上级，且兑换码只能使用一次</text>
				</view>
			</view>
		</u-popup>
		<u-action-sheet :list="list" v-model="showpay" @click="clickshowpay"></u-action-sheet>
	</view>
</template>

<script>
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	data() {
		return {
			list: [
				{
					text: '微信支付',
				},
				{
					text: '余额支付',
				},
			],
			codecategory_id: '',
			showpay: false,
			dataList: [],
			empty: false,
			member_id: '',
			category_id: '',
			category: [],
			codeData: [],
			c: 0,
			cc: 1,
			ccc: 0,
			bulletFrm: false,
			nav: {
				title: '会员中心',
				isback: true,
			},
			code: '',
			dd: [],
			catg: false,
			custom: {
				width: '690rpx',
				height: '100rpx',
				background: '#262c46',
				borderradius: '10rpx',
				fontsize: '32rpx',
				fontfamily: 'PingFang SC ',
				fontweight: 'bold',
				color: ' #ffffff',
			},
			privilege: [
				{
					a: '../../static/images/image008.png',
					b: '折扣',
					c: '商城折扣',
				},
				{
					a: '../../static/images/image004.png',
					b: '基础课',
					c: '免费',
				},
				{
					a: '../../static/images/image005.png',
					b: '参与活动',
					c: '官方优先活动',
				},
				{
					a: '../../static/images/image006.png',
					b: '任选免费',
					c: '风水/姓名/八字',
				},
				{
					a: '../../static/images/image007.png',
					b: '团队奖',
					c: '成交奖励<',
				},
				{
					a: '../../static/images/image002.png',
					b: '兑换码赠送',
					c: '联系客服兑换',
				},
				{
					a: '../../static/images/image001.png',
					b: '推荐老师/产品',
					c: '免费获取',
				},
				{
					a: '../../static/images/image003.png',
					b: '推荐代理奖',
					c: '代理利润',
				},
			],
		};
	},
	onShow() {},
	onLoad(e) {
		this.mshpCrdLst();
	},
	onPageScroll(e) {
		if (e.scrollTop == 0) {
			this.nav = { title: '邀请好友', isback: true };
		} else {
			this.nav = { title: ' ', isback: false };
		}
	},
	computed: {
		...mapState({
			userInfo: ({ user }) => user.userInfo,
			isLogin: ({ user }) => user.isLogin,
			userData: ({ user }) => user.userData,
		}),
	},
	methods: {
		async clickshowpay(e) {
			const res = await this.$http('common.memberPay', {
				payment: e == 1 ? 'wallet' : 'wechat',
				member_id: this.member_id,
				category_id: this.category_id,
			});
			console.log('res :>> ', res);
			if (res.code && e != 1) {
				console.log('11111111111 :>> ', 11111111111);
				const data = res.data.pay_data;
				uni.requestPayment({
					provider: data.provider,
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign,
					success: res => {
						console.log('success:' + JSON.stringify(res));
						this.$tools.toast('支付成功~~');
						this.mshpCrdLst();
					},
					fail: err => {
						console.log('fail:' + JSON.stringify(err));
					},
				});
			}
			if (res.code && e == 1) {
				this.$tools.toast('支付成功~~');
				this.mshpCrdLst();
			}
			// 微信支付
		},

		async click(e, item) {
			console.log('e :>> ', e);
			console.log('item :>> ', item);
			this.c = e;
			this.member_id = item.member_id;
			this.category_id = item.category_id;
		},
		async mbrSelection(e, item) {
			console.log('e :>> ', e);
			this.c = 0;
			this.cc = e;
			console.log('item :>> ', item);
			this.member_id = item.category[0].member_id;
			this.category_id = item.category[0].category_id;

			this.category = this.dd[e - 1].category;
		},
		async clickmbr(e, category_id) {
			this.ccc = e;
			this.codecategory_id = category_id;
		},
		async mshpCrdLst() {
			// gxmembers
			let that = this;
			const res = await that.$http('common.member');
			var data = res.data;
			data.forEach(currentItem => {
				let obj = {
					name: currentItem.name,
					old_price: currentItem.old_price,
					price: currentItem.price,
				};
				console.log('currentItem :>> ', currentItem);
				if (currentItem.category.length　!=　0) {
					currentItem.category.forEach(item => {
						
						(item.text = obj.name), (item.old_price = obj.old_price), (item.price = obj.price);
					});
				}else {
					console.log('123123 :>> ', 123123);
					currentItem.category[0] ={
						name :currentItem.name,
						old_price :currentItem.old_price,
						price :currentItem.price,
						member_id :currentItem.id,
						category_id:7
						
					}
					// currentItem.category[0].old_price = currentItem.old_price,
					// currentItem.category[0].price = currentItem.price,
				}
				
				
			});
			console.log('data :>> ', data);
			this.dd = data;
			this.category = data[this.cc - 1].category;
			this.member_id = data[0].category[0].member_id;
			this.category_id = data[0].category[0].category_id;
			console.log('data :>> ', data);
		},
		//  查询code

		async redeemNow() {
			// code
			// querycode

			if (!this.code) return this.$tools.toast('请输入兑换码~~');

			const res = await this.$http('common.querycode', { code: this.code });
			if (!res.code) return ([this.bulletFrm, this.code] = [0, '']);

			let obj = {
				name: res.data.member.name,
				price: res.data.member.price,
			};
			res.data.member.category.forEach(item => {
				console.log('item :>> ', item);
				(item.text = obj.name), (item.price = obj.price);
			});

			this.codeData = res.data.member.category;
			this.codecategory_id = res.data.member.category[0].category_id;
			this.catg = true;
		},
		async enquireNow() {
			// exchange
			const res = await this.$http('common.exchange', { code: this.code, category_id: this.codecategory_id });
			console.log('res :>> ', res);
		},
		// async name() {
		//     let obj = {
		//         page: this.page,
		//         page_size: this.page_size,
		//     };
		//     const res = await this.$u.post('UserInfo/inviteList', obj, {});
		//     this.data = res.data.list;
		//     this.data.length == 0 && (this.empty = true);
		//     console.log('res :>> ', res.data.list);
		// },
		// async name(pageNo, pageSize) {
		// 	let obj = {
		// 		page: pageNo,
		// 		page_size: pageSize,
		// 	};
		// 	const res = await this.$u.post('UserInfo/inviteList', obj, {});
		// 	if (res.code) {
		// 		this.$refs.paging.complete(res.data.list);
		// 	}
		// },
	},
};
</script>

<style lang="scss" scoped>
.pagebox {
	.redemptionCd {
		width: 520rpx;
		height: 80rpx;
		background: #f5f5f7;
		border-radius: 6rpx;
	}
	.u-navbar {
		position: fixed;
		top: 0;
		transform: translateX(-50%);
		z-index: 99999;
		background-color: transparent !important;
	}
	input,
	.ppp {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #1a1a1a;
	}
	.checkmarkSelection {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
	/deep/ .u-navbar-placeholder {
		height: 0 !important;
	}
	.personalInfo {
		// width: 100vw;
		margin: 0 auto;
		margin-top: -150rpx;
	}
	.exchange {
		width: 100%;
		height: 90rpx;
		background: #a3935c;
		border-radius: 10rpx;

		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;

		margin-bottom: 25rpx;
	}
	.btn {
		width: 690rpx;
		height: 90rpx;
		background: #262c46;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}

	.btnbuyNow {
		position: fixed;
		bottom: calc(env(safe-area-inset-bottom) / 2);
		left: 50%;
		transform: translateX(-50%);
	}
	.wt {
		white-space: nowrap;
	}
	.mb {
		color: #808080;
		margin-right: 60rpx;
		font-size: 28rpx;
		display: flex;
		white-space: nowrap;
	}
	.mbr {
		flex-direction: column;
		z-index: 1;
		color: #1a1a1a;
		font-size: 32rpx;
		font-weight: bold;
		white-space: nowrap;
	}
	.mbr::after {
		content: '';
		width: 100%;
		height: 12rpx;
		background: #fce09d;
		margin-top: -15rpx;
		z-index: -1;
	}

	.link {
		background: linear-gradient(-55deg, #fbecc4, #fffaf0);
	}
	.style2 {
		background: linear-gradient(-55deg, #f1e0b1, #fffaf0);
		border: 3rpx solid #c0ab7b;
	}
	.tt1 {
		color: #2d260b !important;
	}
	.tt2 {
		color: #665925 !important;
	}
	.tt3 {
		color: #9c8c66 !important;
	}
	.tt4 {
		color: #86744d !important;
	}
}
</style>
